<template>
  <div id="phone-order-list">
    <div class="tips">已查询到{{this.currentPhone}}有{{this.phoneOrderList.length}}条未支付订单</div>
    <md-scroll-view class="scroll-view" ref="scrollView" :scrolling-x="false">
      <div class="phone-order-list-item column" v-for="(item, index) in phoneOrderList" :key="index">
        <div class="upper row between centered">
          <div class="left">城际-{{item.order_type}}</div>
          <div class="right row" @click="gotoPayment(item)">
            <a style="margin-right:10px">{{item.order_amt}}元</a>
            <div>
              立即支付
              <md-icon class="wdqb-more" name="wdqb-more"></md-icon>
            </div>
          </div>
        </div>
        <div class="lower column">
          <div class="row middle">
            <div class="icon-div">
              <md-icon class="time-icon" name="time"></md-icon>
            </div>
            <div>{{dateString(item.travel_time, item.travel_end_time)}}</div>
          </div>
          <div class="row middle">
            <div class="icon-div">
              <md-icon class="shangchedian-icon" name="shangchedian"></md-icon>
            </div>
            <div class="place-string text-ellipsis">{{item.startRoute}} · {{item.origin}}</div>
          </div>
          <div class="row middle">
            <div class="icon-div">
              <md-icon class="xiachedian-icon" name="xiachedian"></md-icon>
            </div>
            <div class="place-string text-ellipsis">{{item.endRoute}} · {{item.destination}}</div>
          </div>
        </div>
      </div>
    </md-scroll-view>
  </div>
</template>
<script>
import '@/assets/svgs/wdqb-more.svg';
import '@/assets/svgs/time.svg';
import '@/assets/svgs/shangchedian.svg';
import '@/assets/svgs/xiachedian.svg';
import { mapGetters } from 'vuex';
import { ScrollView, Icon, Toast } from 'mand-mobile';
import moment from 'moment';
export default {
  name: 'phone-order-list',
  components: {
    [ScrollView.name]: ScrollView,
    [Icon.name]: Icon
  },
  created() {
    if (this.phoneOrderList.length <= 0) {
      let phone = this.$route.query.phone;
      if (phone) {
        this.$store.dispatch('getPhoneOrdersByPhone', phone).then(() => {
          if (this.phoneOrderList instanceof Array) {
            if (this.phoneOrderList.length <= 0) {
              Toast({
                content: '该手机号暂无未支付的订单',
                duration: 3000
              });
            } else {
              let orderInfo = this.phoneOrderList[0];
              this.$router.push({
                name: 'PhoneOrderPayment',
                query: {
                  orderno: orderInfo.order_no
                }
              });
            }
          }
        });
      }
    }
  },
  methods: {
    gotoPayment(item) {
      this.$router.push({
        name: 'PhoneOrderPayment',
        query: {
          orderno: item.order_no
        }
      });
    },
    dateString(start, end) {
      let startString = moment(parseInt(start)).format('MM-DD HH:mm');
      let endString = moment(parseInt(end)).format('HH:mm');
      return startString + '~' + endString;
    }
  },
  computed: {
    ...mapGetters(['phoneOrderList', 'currentPhone'])
  }
};
</script>
<style lang="stylus" scoped>
#phone-order-list {
  width: 100vw;
  height: 100vh;
  background-color: color-primary-background;
  padding: 20px;
  box-sizing: border-box;
  color: #666666;

  a {
    color: color-primary;
  }

  .tips {
    font-size: 26px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 26px;
    margin-top: 20px;
  }

  .scroll-view {
    background-color: transparent;
    height: calc(100vh - 80px);

    .phone-order-list-item {
      margin: 20px 0px;
      width: 100%;
      height: 234px;
      background-color: #fff;
      border-radius: 6px;

      .upper {
        height: 80px;
        border-bottom: 1px solid #E0E0E0;
        padding: 0px 20px;
        font-size: 26px;

        .left {
          color: #333333;
          font-size: 28px;
        }

        .wdqb-more {
          width: 12px;
          height: 20px;
        }
      }

      .lower {
        font-size: 24px;
        padding: 20px;
        justify-content: space-around;
        align-items: start;
        flex: 1;

        .middle {
          align-items: center;
        }

        .icon-div {
          width: 24px !important;
          height: 24px !important;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;

          .time-icon {
            width: 16px;
            height: 16px;
          }

          .shangchedian-icon {
            width: 16px;
            height: 16px;
          }

          .xiachedian-icon {
            width: 16px;
            height: 16px;
          }
        }

        .place-string {
          max-width: 85vw;
        }
      }
    }
  }
}
</style>
